//由于没有搭建开发环境，未采用单文件组件的开发方式，组件模板直接写在了JS里以字符串形式出现
window.onload = function () {
    var date = { isshow: true };
    //导航部分
    Vue.component('tem-swiper', {
        props: ["swiperinfo"],
        template: "<div class=\"swiper-slide\" v-bind:class=\"{actcolor:swiperinfo.active}\" v-bind:data-id=\"swiperinfo.tabid\" v-on:click=\"tabtog($event)\">{{swiperinfo.name}}</div>",
        methods: {
            tabtog: function (event) {
                var target = event.target;
                if (target.classList.contains('actcolor')) {
                    return;
                }
                var len = this.$parent.$data.temswipers.length;
                while (len--) {
                    this.$parent.$data.temswipers[len].active = false;
                }
                this.swiperinfo.active = true;
                this.$emit('tabtog', target.dataset.id);
            }
        }
    });
    //单图组件
    Vue.component('one-pic', {
        props: ["picinfo"],
        template: "<div v-if=\"isshow\" class=\"pic\">" +
        "<div class=\"one-content\">" +
        "<h3>{{picinfo.oneh3}}</h3>" +
        "<div class='img-box'><img v-bind:src=\"picinfo.onesrc\" alt=\"\"></div>" +
        "</div>" +
        "<div class=\"foot-img\">" +
        "<div class=\"foot-describe\">" +
        "<i>{{picinfo.onei}}</i>" +
        "<span>{{picinfo.onespan1}}</span>" +
        "<span>{{picinfo.onespan2}}</span>" +
        "<span>{{picinfo.onespan3}}</span>" +
        "</div>" +
        "<div class=\"close\" v-on:click=\"isshow=false\"><span>×</span></div>" +
        "</div>" +
        "</div>",
        data: function () {
            return {
                isshow: true
            }
        }
    });
    //多图组件
    Vue.component('two-pic', {
        props: ['picinfo'],
        template: "<div v-if=\"isshow\" class=\"pic\">" +
        "<h3>{{picinfo.twoh3}}</h3>" +
        "<div class=\"three-img\">" +
        "<div class='img-box'><img v-bind:src=\"picinfo.twosrc1\" alt=\"\" /></div>" +
        "<div class='img-box'><img v-bind:src=\"picinfo.twosrc2\" alt=\"\" /></div>" +
        "<div class='img-box'><img v-bind:src=\"picinfo.twosrc3\" alt=\"\" /></div>" +
        "</div>" +
        "<div class=\"foot-img\">" +
        "<div class=\"foot-describe\">" +
        "<span>{{picinfo.twospan1}}</span>" +
        "<span>{{picinfo.twospan2}}</span>" +
        "<span>{{picinfo.twospan3}}</span>" +
        "</div>" +
        "<div class=\"close\" v-on:click=\"isshow=false\"><span>×</span></div>" +
        "</div>" +
        "</div>",
        data: function () {
            return {
                isshow: true
            }
        }
    });

    new Vue({
        el: '#today_headlines',
        data: {
            actindex: 0,
            temswipers: [],
            items: []
        },
        methods: {
            addmore: function (tabid) {
                var _this = this;
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://www.baidu.com');
                xhr.onload = function (response) {
                    _this.$data.items = _this.$data.items.concat(response.items);
                }
                xhr.send({ 'tabid': tabid });
            },
            handleScroll: function (event) {
                //判断滑动高度
                if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
                    console.log('到达底部');
                    //_this.$data.temswipers = ["推荐", "热点", "视频", "成都", "社会", "头条号"];
                }
            },
            handletog: function (val) {
                this.addmore(val);
            }
        },
        mounted: function () {
            document.getElementById('entriescon').addEventListener('scroll', this.handleScroll);
            this.temswipers = [{ tabid: 1, name: '推荐', active: true }, { tabid: 2, name: '热点', active: false }, { tabid: 3, name: '视频', active: false }, { tabid: 4, name: '成都', active: false }, { tabid: 5, name: '社会', active: false }, { tabid: 6, name: '头条号', active: false }, { tabid: 7, name: '问答', active: false }];
            this.items = [
                {
                    type: '1',
                    oneh3: "陈羽凡发朋友圈疑回应白百何出轨：毁我家者 必让你亡",
                    onesrc: "../img/pic_one.png",
                    onei: "热",
                    onespan1: "海外网",
                    onespan2: "1.4万评论",
                    onespan3: "7分钟前"
                },
                {
                    type: '2',
                    twoh3: "菇凉，你这样让我们男生情何以堪？",
                    twosrc1: "../img/pic_t_one.png",
                    twosrc2: "../img/pic_t_two.png",
                    twosrc3: "../img/pic_t_three.png",
                    twospan1: "搞笑奇葩坊",
                    twospan2: "45评论",
                    twospan3: "15分钟前"
                },
                {
                    type: '1',
                    oneh3: "陈羽凡发朋友圈疑回应白百何出轨：毁我家者 必让你亡",
                    onesrc: "../img/pic_one.png",
                    onei: "热",
                    onespan1: "海外网",
                    onespan2: "1.4万评论",
                    onespan3: "7分钟前"
                },
                {
                    type: '2',
                    twoh3: "菇凉，你这样让我们男生情何以堪？",
                    twosrc1: "../img/pic_t_one.png",
                    twosrc2: "../img/pic_t_two.png",
                    twosrc3: "../img/pic_t_three.png",
                    twospan1: "搞笑奇葩坊",
                    twospan2: "45评论",
                    twospan3: "15分钟前"
                },
                {
                    type: '1',
                    oneh3: "陈羽凡发朋友圈疑回应白百何出轨：毁我家者 必让你亡",
                    onesrc: "../img/pic_one.png",
                    onei: "热",
                    onespan1: "海外网",
                    onespan2: "1.4万评论",
                    onespan3: "7分钟前"
                },
                {
                    type: '2',
                    twoh3: "菇凉，你这样让我们男生情何以堪？",
                    twosrc1: "../img/pic_t_one.png",
                    twosrc2: "../img/pic_t_two.png",
                    twosrc3: "../img/pic_t_three.png",
                    twospan1: "搞笑奇葩坊",
                    twospan2: "45评论",
                    twospan3: "15分钟前"
                }
            ];
        },
        updated: function () {
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                slidesPerView: 5,
                paginationClickable: true,
                spaceBetween: 30,
                freeMode: true
            });
        },
        destroyed() {
            document.getElementById('entriescon').removeEventListener('scroll', this.handleScroll);
        }
    });

}
